<template>
    <!-- 每个模版页必须有一个根节点标签 -->
    <div>
        <!-- 这里就是组件页面显示的内容 -->
        <!-- 进入该页面提示音 -->
        <audio id="welcomeAudio" controls="controls" hidden :src="url" ref="refaudio"></audio>
    </div>
</template>
<script>


export default {
  name: "welcomeAudioTip",//定义组件的名称 
  props:{//定义组件的对外暴露的属性，通过外部调用组件时，向组件内传递参数及对象
    audiourl:String
  },
  data() {//定义组件内的属性,组件内属性调用方式使用生命周期关键字this 如：this.age
    return {
        url: this.audiourl, //提示音
    };
  },
  created(){//组件初始化时创建默认属性
    // this.welcomeAudioTip=this.audiourl;
    // this.play();
  },
  mounted(){//同样也是组件初始化时使用，mounted方法会在页面完全加载后进行DOM相关的操作，如果使用created，有时初始化效果会失效，一般建议初始化使用mounted    
    //new MouseEvent('click');
    this.url=this.audiourl
    this.play();
  },
  methods: {//定义组件内事件的方法，如果无则不需要填写
    play() {
        const _this=this;
        _this.url=_this.audiourl;
        console.log("打印当前音频地址："+_this.audiourl);
        _this.$refs.refaudio.currentTime = 0; //从头开始播放提示音
        _this.$refs.refaudio.load(); //播放
        this.$nextTick(()=>{
            _this.$refs.refaudio.play(); //播放
        });
        
    }
  }
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
</style>